<template>
    <el-dialog :title="form_title" :visible.sync="isShow" width="70%" :lock-scroll="true" append-to-body>
        <!-- 终端自检记录 -->
        <div class="dialog">
            <div v-for="item in selfinsConfig" :key="item">
                <el-divider content-position="left">{{ item.title }}</el-divider>
                <el-row v-if="item.list.length > 0">
                    <el-col :span="6" v-for="i in item.list" :key="i">
                        <div class="item" v-if="item.title == '系统状态'">
                            <div class="label">{{ i.label }} :</div>
                            <div class="label value" v-if="i.value == 1">
                                <div class="color" style="backgroundColor: #00FF72;"></div>
                                <span> 正常</span>
                            </div>
                            <div class="label value" v-else>
                                <div class="color" style="backgroundColor: #E33E31;"></div>
                                <span>异常</span>
                            </div>
                        </div>
                        <div class="item" v-else-if="item.title == '通道状态'">
                            <div class="label">{{ i.label }} :</div>
                            <div class="label value" v-if="i.value == 1">
                                <div class="color" style="backgroundColor: #00FF72;"></div>
                                <span> 在线</span>
                            </div>
                            <div class="label value" v-else>
                                <div class="color" style="backgroundColor: #808080;"></div>
                                <span>离线</span>
                            </div>
                        </div>
                    </el-col>

                </el-row  >
                <div class="noData" v-else>暂无数据</div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { requestApi } from '@/requset/api'
import { selfinsConfig, colors, status } from './formConfig'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            form_title: "自诊断",
            isShow: false,
            selfinsConfig: null,
            item: null,
            system_config: null,
            sensor_config: null,
            atime: null
        }
    },
    methods: {
        doOpen(e) {
            this.item = e


            const { number } = this.item
            requestApi("post", "wavecoll/self", { number }, true).then(res => {
                if (res.data.code == 0) {
                    let { message1, message2, time } = res.data.data[0]
                    this.selfinsConfig[0].list = JSON.parse(message1)
                    this.selfinsConfig[1].list = JSON.parse(message2)
                }
            })
            this.isShow = true
        },
    },
    created() {
        this.selfinsConfig = deepClone(selfinsConfig)
    }
}
</script>

<style lang="less" scoped>
.item {
    margin-left: 20%;
    width: 60%;
    height: 48px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: aliceblue;

    .label {
        width: 40%;
        text-align: center;
        font-size: 16px;
        display: flex;
        align-items: center;
    }

    .value {
        .color {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
    }
}

.noData {
    color: aliceblue;
    text-align: center;
}
</style>
